<template>
  <div>
    <Search
      @click="
        form = {};
        $refs.d.show();
      "
      >添加角色</Search
    >
    <MyTable
      :tp="{ hasChildren: 'hasChildren', children: 'abc' }"
      :loading="queryloading"
      :cols="cols"
      :data="list"
    >
      <template v-slot:menu="{ row }">
         <Tags :children="row.children"/>
      </template>
      <template v-slot:action="{ row }">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="
            form = { ...row };
            $refs.d.show();
          "
          circle
        ></el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          @click="delRoles(row)"
          circle
        ></el-button>
        <el-button
          type="warning"
          icon="el-icon-star-off"
          @click="
            getMenus();
            form = { ...row };
          "
          circle
        >
        </el-button>
      </template>
    </MyTable>

    <DF
      lw="100px"
      :title="this.title + '用户'"
      v-model="form"
      :opts="opts"
      @confirm="confirm"
      ref="d"
    ></DF>
    <Dialog title="分配角色" ref="dia" @confirm="updateRights">
      <el-tree
        ref="tree"
        :data="menus"
        show-checkbox
        node-key="id"
        :props="{ label: 'authName', children: 'children' }"
        default-expand-all
        :loading="queryloading"
        :default-checked-keys="keys"
      ></el-tree>
    </Dialog>
    <Tags/>
  </div>
</template>

<script>
import {
  getRoles,
  addrRoles,
  editRoles,
  deleteRoles,
  getMenuTree,
  assignRights,
} from "api/roles";
import    Tags from "./components/Tags"
export default {
  components:{Tags},
  name: "roles",
  data() {
    return {
      /**
       * 列
       */
      cols: [
        { title: "", type: "expand", slot: "menu" },
        { title: "#", type: "index" },
        { title: "角色名称", name: "roleName" },
        { title: "角色描述", name: "roleDesc" },
        { title: "操作", align: "center", width: 300, slot: "action" },
      ],
      /**
       * 模型
       */
      form: {},
      /**
       * 表单
       */
      /**
       * 树形菜单列表
       */
      menus: [],
      /**
       * 树形菜单选中列表
       */
      keys: [],
    };
  },

  mounted() {},
  methods: {
    async updateRights() {
      const di = this.$refs.dia;
      try {
        const tree = this.$refs.tree;
        const keys = [
          ...tree.getCheckedKeys(),
          ...tree.getHalfCheckedKeys(),
        ].join(",");
        di.start();
        await assignRights(this.form.id, keys);
        this.$m.success("权限分配成功");
        di.hide();
        this.getRoleList();
      } catch (error) {}
      di.stop();
    },
    /**
     * 获取树形菜单
     */
    async getMenus() {
      const d = this.$refs.dia;
      try {
        this.queryloading = true;
        this.menus = await getMenuTree();
        this.keys = [];
        // console.log(this.keys);
        const deep = (children) => {
          for (const child of children) {
            if (child.children) {
              deep(child.children);
            } else {
              this.keys.push(child.id);
            }
          }
        };
        deep(this.form.children);
        d.show();
      } catch (error) {}
      this.queryloading = false;
    },
    /**
     * 删除
     */
    async delRoles({ id, roleName }) {
      let res;
      try {
        res = await this.$myConfirm(`您确定要删除【${roleName}】吗？`);
        await deleteRoles(id);
        this.$m.success("删除成功");
        this.getRoleList();
      } catch (error) {}
      res && res();
    },
    /**
     * 渲染
     */
    async getRoleList() {
      try {
        this.queryloading = true;
        this.list = await getRoles();
      } catch (error) {}
      this.queryloading = false;
    },

    /**
     * 添加修改
     */
    async confirm() {
      const d = this.$refs.d;
      try {
        d.start();
        await (this.form.id ? editRoles : addrRoles)(this.form);
        this.$m.success(this.title + "角色成功");
        d.hide();
        this.getRoleList();
      } catch (error) {}
      d.slot();
    },
  },
  created() {
    this.getRoleList();
  },
  computed: {
    title() {
      return this.form.id ? "修改" : "添加";
    },
    opts() {
      return {
        roleName: {
          title: "角色名称",
          required: true,
          max: 20,
        },
        roleDesc: {
          title: "角色描述",
          required: true,
          max: 1000,
        },
      };
    },
  },
};
</script>

<style scoped></style>
